<template>
    <div class="TaskWarp">
        <div class="divMain guilei" @click.stop>
            <div class="divTitle" v-if="!Questions.transit">
                <h2>{{Questions.child.QtypeName}}：{{Questions.child.QuestionRemark}}</h2>
            </div>
            <!--<div class="tigan" v-html="Questions.child.stem[0].StemContent"></div>-->
            <div class="divContent" style="background: #fff">
                <ul class="options clearfix">
                    <draggable class="draggableContent clearfix optionsDraggable" :options="{group:'people'}" @end="SetAnswer">
                        <div style="display: inline-block" v-for="(item,index) in Questions.child.stem[0].opts">
                            <div class="draggable noSwipwe" v-for="val in JSON.parse(item.OptionContent)" v-html="val.Content"  v-bind:data-value="val.Number"></div>
                        </div>
                    </draggable>
                </ul>
                <div class="continerWarp clearfix">
                    <ul v-for="(item,index) in Questions.child.stem[0].opts" class="continer" v-bind:data-optid="item.ID" :style="background(item)">
                        <li class="continerTitle">
                            {{item.OptionNumber}}
                        </li>
                        <draggable class="draggableContent clearfix continerDraggable noSwipwe" :options="{group:'people'}"></draggable>
                    </ul>
                </div>
    
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import draggable from 'vuedraggable'
import AnswerHelper from '../../../../assets/js/AnswerHelper.js'
export default {
    name: "guiLei",
    props: ["Questions","defAnswer"],
    methods: {
        background(item) {
            var urlString = JSON.parse(item.OptionContent)[0]
            console.log(urlString)
            if (JSON.parse(item.OptionContent).length >= 0) {
                if (urlString.src != '' || urlString.src != 'undefined') {
                    return 'background: #ccc url("' + picSrc + urlString.src + '") no-repeat;background-size: cover;'
                }
            } else {
                return 'background-color:red'
            }
        },
         SetAnswer(){
            this.defAnswer.AnswerTimeJsCut=new Date().getTime()
            var dxxz = $('div.guilei:first')
            var _answer = []
            dxxz.find('[data-optid]').each(function (i, v) {
                var item = { "TestOptionId": $(v).attr('data-optid'), "CorrectAnswer": "" },_oid=[]
                $(v).find('div[data-value]').each(function (j, w) {
                    _oid.push($(w).attr('data-value'))
                })
                item.CorrectAnswer = _oid.join(',')
                _answer.push(item)
            })
            this.defAnswer.Answer = JSON.stringify(_answer)
            AnswerHelper.SetAnswer(this.defAnswer)
         }
    },
    components: {
        draggable,
    },
    mounted() {
        $('.divContent img').each(function () {
            var _this = $(this)
            _this.upImgSrc()
        })
    },
    data() {
        return {}
    }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.guilei {
    .options {
        height: 30%;
        overflow: scroll;
        background-color: #fff;
        .draggableContent {
            height: 100%;
            .draggable {
                width: 100px;
                height: 100px;
                margin: 10px;
                background: #fff;
                border: 1px solid #000;
                float: left;
                p {
                    height: 100%;
                    width: 100%;
                    position: relative;
                    text-align: center;
                    font-size: 14px;
                    line-height: 20px;
                    img {
                        width: 80%;
                        height: 80%;
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                }
            }
        }
    }
    .continerWarp {
        list-style: none;
        li {
            list-style: none;
        }
        height: 70%;
        overflow: scroll;
        background-color: #fff;
        .continer {
            width: 28%;
            margin: 1%;
            height: 60%;
            box-sizing: border-box;
            background: #ccc;
            float: left;
            overflow: scroll;
            .continerTitle {
                text-align: center;
                padding: 10px 0;
                color: #FF7373;
                font-size: 24px;
                width: 80%;
                margin: 0 auto;
                border-bottom: 2px solid #FF7373;
            }
            .draggableContent {
                min-height: 60%;
                .draggable {
                    width: 100px;
                    height: 100px;
                    margin: 10px;
                    background: #fff;
                    border: 1px solid #000;
                    float: left;
                    p {
                        height: 100%;
                        width: 100%;
                        position: relative;
                        text-align: center;
                        font-size: 14px;
                        line-height: 20px;
                        img {
                            width: 80%;
                            height: 80%;
                            position: absolute;
                            left: 0;
                            right: 0;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../../../assets/css/public.scss';

.TaskWarp {
    height: 90%;
    width: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .divMain {
        position: absolute;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
}
</style>